<!--
 * @Date: 2020-12-28 18:45:22
 * @LastEditTime: 2020-12-31 16:20:54
 * @FilePath: /show/src/views/index.vue
 * @Author: twy
 * @LastEditors: twy
-->
<template>
  <el-container class="root">
    <el-header style="height:none;" class="header">
      <router-link class="nav-item" to="/home" style="font-size: 60px;margin-right:60px;">
        Blue bamboo
      </router-link>
      <router-link class="nav-item" v-for="item in myList" :key="item.url" :to="item.url">
        {{ item.name }}
      </router-link>
      <img style="position:absolute;left:50px;" height="60" width="50" src="/logo.jpg" alt="" />
    </el-header>
    <el-main style="padding:0px;">
      <router-view />
      <el-footer height='200' class="c_footer">
        <img height="30" width="20" src="/logo.jpg" alt="" />
        Blue bamboo
      </el-footer>
    </el-main>
  </el-container>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      myList: [
        {
          name: 'Our Value',
          url: '/ourValue'
        },{
          name: 'Our Team',
          url: '/ourTeam'
        },{
          name: 'Our strategy',
          url: '/ourStrategy'
        }
      ]
    }
  },
  computed: {
    navList() {
      return
    }
  }
}
</script>

<style scoped>
.root {
  position: relative;
  height: 100vh;
}
.header {
  z-index:100;
  background:white;
  position:fixed;
  display:flex;
  align-items:center;
  padding:20px 120px;
  width:100%
}
.nav-item {
  text-decoration:none;
  font-size: 26px;
  color:black;
  margin-right: 30px;
}
.c_footer {
  width: 100%;
  height:100px;
  background:#e2e1e1;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<style >
body {
  margin: 0px;
}
</style>